<template>
	<el-container>
		<el-header style="height: auto;">
			<sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>
		</el-header>
		<el-main class="nopadding">
			<el-table ref="table" :data="paginatedData">
				<el-table-column label="#" type="index" width="50"></el-table-column>
<!--				<el-table-column label="流水号" prop="id" width="150"></el-table-column>-->
<!--				<el-table-column label="流程标题" prop="flowTitle" width="150"></el-table-column>-->
				<el-table-column label="申请人" prop="userName" width="150"></el-table-column>
				<el-table-column label="申请人部门" prop="userDeptName" width="150"></el-table-column>
				<el-table-column label="审批人" prop="approverUserName" width="150"></el-table-column>
				<el-table-column label="审批人部门" prop="approverDeptName" width="150"></el-table-column>
				<el-table-column label="外出开始时间" prop="outTime" width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出结束时间" prop="endTime" width="150" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出地点" prop="outAddress" width="200" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="外出事由" prop="reason" width="300" :show-overflow-tooltip="true"></el-table-column>
				<el-table-column label="申请状态" prop="typeStatus" width="150">
					<template #default="scope">
						{{ scope.row.typeStatus === undefined ? '--' : scope.row.typeStatus == '0' ? '审核中' : scope.row.typeStatus == '1' ? '通过' : '不通过' }}
					</template>
				</el-table-column>
<!--				<el-table-column label="操作" fixed="right" align="right" width="100">-->
<!--					<template #default="scope">-->
<!--						<el-button-group>-->
<!--							<el-button text type="primary" size="small" @click="readBpmDetails(scope.row, scope.$index)">查看</el-button>-->
<!--						</el-button-group>-->
<!--					</template>-->
<!--				</el-table-column>-->
			</el-table>
			<el-pagination
				@size-change="handleSizeChange"
				@current-change="handleCurrentChange"
				:current-page="search.page"
				:page-size="search.pageSize"
				layout="total, prev, pager, next"
				:total="total">
			</el-pagination>
		</el-main>
	</el-container>
</template>

<script>
import scSelectFilter from '@/components/scSelectFilter'
export default {
	name: 'My Attend Record',
	components: {
		scSelectFilter,
	},
	data() {
		return {
			dialog: {
				save: false,
				detailsSave: false
			},
			filterData: [
				{
					title: "日期范围",
					key: "date",
					multiple: false,
					options: [
						{
							label: "全部",
							value: ""
						},
						{
							label: "今日",
							value: "1"
						},
						{
							label: "昨日",
							value: "2"
						},
						{
							label: "一周内",
							value: "3"
						},
						{
							label: "一月内",
							value: "4"
						},
						{
							label: "一月前",
							value: "5"
						}
					]
				}
			],
			apiObj: undefined,
			search: {
				date: '',
				id: '',
				page: 1,
				pageSize: 10
			},
			total: 0 // 总记录数
		}
	},
	mounted() {
		console.log("apiObj", this.apiObj)
		let userInfo = this.$TOOL.data.get("USER_INFO");
		console.log("111111111111111111111111", userInfo);
		if (userInfo && userInfo.id) {
			this.search.id = userInfo.id;
			this.fetchData();
		} else {
			console.error("USER_INFO is undefined or invalid");
		}
	},
	computed: {
		paginatedData() {
			const start = (this.search.page - 1) * this.search.pageSize;
			const end = start + this.search.pageSize;
			return this.apiObj ? this.apiObj.slice(start, end) : [];
		}
	},
	methods: {
		filterChange(data) {
			this.search.date = data.date;
			this.fetchData();
		},
		fetchData() {
			this.$API.office.attend.getTheApplicantSOutOfOfficeAttendanceList.get({
				status:'6',
				option1: this.search.id,
				date: this.search.date,
				page: this.search.page,
				pageSize: this.search.pageSize
			}).then(res => {
				console.log('res:', res);
				// 确保 res.data.list 是一个数组
				if (Array.isArray(res.data.list)) {
					this.apiObj = res.data.list;
					this.total = res.data.total; // 假设接口返回的总记录数字段为 total
				} else {
					console.error("res.data.list is not an array", res.data.list);
					this.apiObj = [];
					this.total = 0;
				}
				console.log('this.apiObj:', this.apiObj);
			}).catch(err => {
				console.error("接口调用失败", err);
			});
		},
		handleSizeChange(newSize) {
			this.search.pageSize = newSize;
			this.fetchData();
		},
		handleCurrentChange(newPage) {
			this.search.page = newPage;
			this.fetchData();
		},
		readBpmDetails(row, index) {
			this.$nextTick(() => {
				this.$router.replace({
					path: '/bpm/handle/read',
					query: {
						runId: row.runId
					}
				});
			});
		}
	}
}
</script>

<style>
</style>

<!--<template>-->
<!--    <el-container>-->
<!--        <el-header style="height: auto;">-->
<!--            <sc-select-filter :data="filterData" :label-width="80" @on-change="filterChange"></sc-select-filter>-->
<!--        </el-header>-->
<!--        <el-main class="nopadding">-->
<!--			<el-table ref="table" :data="apiObj" >-->
<!--				<el-table-column label="#" type="index" width="50"></el-table-column>-->
<!--				<el-table-column label="流水号" prop="id" width="150"></el-table-column>-->
<!--				<el-table-column label="流程标题" prop="flowTitle" width="150"></el-table-column>-->
<!--				<el-table-column label="申请人" prop="userName" width="150"></el-table-column>-->
<!--				<el-table-column label="申请人部门" prop="userDeptName" width="150"></el-table-column>-->
<!--				<el-table-column label="审批人" prop="approverUserName" width="150"></el-table-column>-->
<!--				<el-table-column label="审批人部门" prop="approverDeptName" width="150"></el-table-column>-->
<!--				<el-table-column label="外出开始时间" prop="outTime" width="150" :show-overflow-tooltip="true"></el-table-column>-->
<!--				<el-table-column label="外出结束时间" prop="endTime" width="150" :show-overflow-tooltip="true"></el-table-column>-->
<!--				<el-table-column label="外出地点" prop="outAddress" width="200" :show-overflow-tooltip="true"></el-table-column>-->
<!--				<el-table-column label="外出事由" prop="reason" width="300" :show-overflow-tooltip="true"></el-table-column>-->
<!--				<el-table-column label="操作" fixed="right" align="right" width="100">-->
<!--					<template #default="scope">-->
<!--						<el-button-group>-->
<!--							<el-button text type="primary" size="small" @click="readBpmDetails(scope.row, scope.$index)">查看</el-button>-->
<!--						</el-button-group>-->
<!--					</template>-->
<!--				</el-table-column>-->
<!--			</el-table>-->
<!--&lt;!&ndash;            <scTable ref="table" :apiObj="apiObj" row-key="runId" stripe remoteSort remoteFilter>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="#" type="index" width="50"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="流水号" prop="id" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="流程标题" prop="flowTitle" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="申请人" prop="userName" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="申请人部门" prop="userDeptName" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="审批人" prop="approverUserName" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="审批人部门" prop="approverDeptName" width="150"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="外出开始时间" prop="outTime" width="150" :show-overflow-tooltip="true"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="外出结束时间" prop="endTime" width="150" :show-overflow-tooltip="true"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="外出地点" prop="outAddress" width="200" :show-overflow-tooltip="true"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="外出事由" prop="reason" width="300" :show-overflow-tooltip="true"></el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;                <el-table-column label="操作" fixed="right" align="right" width="100">&ndash;&gt;-->
<!--&lt;!&ndash;                    <template #default="scope">&ndash;&gt;-->
<!--&lt;!&ndash;                        <el-button-group>&ndash;&gt;-->
<!--&lt;!&ndash;                            <el-button text type="primary" size="small" @click="readBpmDetails(scope.row, scope.$index)">查看</el-button>&ndash;&gt;-->
<!--&lt;!&ndash;                        </el-button-group>&ndash;&gt;-->
<!--&lt;!&ndash;                    </template>&ndash;&gt;-->
<!--&lt;!&ndash;                </el-table-column>&ndash;&gt;-->
<!--&lt;!&ndash;            </scTable>&ndash;&gt;-->
<!--        </el-main>-->
<!--    </el-container>-->
<!--</template>-->

<!--<script>-->
<!--import scSelectFilter from '@/components/scSelectFilter'-->
<!--export default {-->
<!--    name: 'My Attend Record',-->
<!--    components: {-->
<!--        scSelectFilter,-->
<!--    },-->
<!--    data() {-->
<!--        return {-->
<!--            dialog: {-->
<!--                save: false,-->
<!--                detailsSave: false-->
<!--            },-->
<!--            filterData: [-->
<!--                {-->
<!--                    title: "日期范围",-->
<!--                    key: "date",-->
<!--                    multiple: false,-->
<!--                    options: [-->
<!--                        {-->
<!--                            label: "全部",-->
<!--                            value: ""-->
<!--                        },-->
<!--                        {-->
<!--                            label: "今日",-->
<!--                            value: "1"-->
<!--                        },-->
<!--                        {-->
<!--                            label: "昨日",-->
<!--                            value: "2"-->
<!--                        },-->
<!--                        {-->
<!--                            label: "一周内",-->
<!--                            value: "3"-->
<!--                        },-->
<!--                        {-->
<!--                            label: "一月内",-->
<!--                            value: "4"-->
<!--                        },-->
<!--                        {-->
<!--                            label: "一月前",-->
<!--                            value: "5"-->
<!--                        }-->
<!--                    ]-->
<!--                }-->
<!--            ],-->
<!--            // apiObj: this.$API.office.attend.getMyOutAttendList,-->
<!--            apiObj: undefined,-->
<!--            search: {-->
<!--                date: '',-->
<!--                id: '',-->
<!--                page: 1,-->
<!--                pageSize: 10-->
<!--            }-->
<!--        }-->
<!--    },-->
<!--    mounted() {-->
<!--		console.log("apiObj",this.apiObj)-->
<!--        let userInfo = this.$TOOL.data.get("USER_INFO");-->
<!--        console.log("111111111111111111111111", userInfo);-->
<!--        if (userInfo && userInfo.id) {-->
<!--            this.search.id = userInfo.id;-->
<!--            this.fetchData();-->
<!--        } else {-->
<!--            console.error("USER_INFO is undefined or invalid");-->
<!--        }-->
<!--    },-->
<!--    methods: {-->
<!--        filterChange(data) {-->
<!--            this.search.date = data.date;-->
<!--            this.fetchData();-->
<!--        },-->
<!--        fetchData() {-->
<!--			  this.$API.office.attend.getMyOutAttendList.get({-->
<!--                option1: this.search.id,-->
<!--                date: this.search.date,-->
<!--                page: this.search.page,-->
<!--                pageSize: this.search.pageSize-->
<!--            }).then(res => {-->
<!--                console.log('res:', res);-->
<!--                // 确保 res.data.list 是一个数组-->
<!--                if (Array.isArray(res.data.list)) {-->
<!--                    this.apiObj = res.data.list;-->
<!--                } else {-->
<!--                    console.error("res.data.list is not an array", res.data.list);-->
<!--                    this.apiObj = [];-->
<!--                }-->
<!--                console.log('this.apiObj:', this.apiObj);-->
<!--            }).catch(err => {-->
<!--                console.error("接口调用失败", err);-->
<!--            });-->
<!--        },-->
<!--        readBpmDetails(row, index) {-->
<!--            this.$nextTick(() => {-->
<!--                this.$router.replace({-->
<!--                    path: '/bpm/handle/read',-->
<!--                    query: {-->
<!--                        runId: row.runId-->
<!--                    }-->
<!--                });-->
<!--            });-->
<!--        }-->
<!--    }-->
<!--}-->
<!--</script>-->

<!--<style>-->
<!--</style>-->
